<template>
  <div class="app-container">
    <el-form :model="form" ref="form" v-show="showSearch" label-width="100px">
      <div style="margin-top: -40px;">
        <div style="font-size: 20px; margin-bottom: 20px;">基本信息
        </div>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="图片">
              <el-image :z-index="zIndex" :preview-src-list="[form.couponIconUrl]"
                :src="form.couponIconUrl"  style="width: 80px;height: 80px;margin-left: 10px">
              </el-image>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动类型" width="400px">
              <span>{{ form.activityTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动名称" width="400px">
              <span>{{ form.activityName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" width="400px">
              <span>{{ form.beginTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" width="400px">
              <span>{{ form.endTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="规则简述" width="400px">
              <span>{{ form.ruleDesc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细描述" width="400px">
              <span>{{ form.detailedDesc || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="预留支付时长" width="400px">
              <span>{{ form.payMinute }} 分钟</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动状态" width="400px">
              <span>{{ form.dataStatusName }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <div style="font-size: 20px; margin-bottom: 30px;" >
          <div style="margin-top: 20px;" v-if="form.activityInfoProVo && form.activityInfoProVo.length > 0 ">活动商品
            <el-table  :data="form.activityInfoProVo" stripe style="width: 100%" border>
              <el-table-column prop="imgUrl" label="图片" width="80" align="center">
                <template slot-scope="scope">
                  <el-image :z-index="zIndex" v-if="scope.row.imgUrl != null && scope.row.imgUrl != '' "
                    slot="reference" :src="scope.row.imgUrl" class="image-rows" :preview-src-list="[scope.row.imgUrl]">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column prop="proName" label="商品名称" :show-overflow-tooltip="true" width="200"/>
              <el-table-column prop="activityPriceStr" label="活动价格(元)" :show-overflow-tooltip="true" align="center"/>
              <el-table-column prop="stockNumber" label="商品库存" align="center"/>
              <el-table-column prop="activityStock" label="活动库存" align="center"/>
              <el-table-column prop="limitsNumber" label="限购数量" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.limitsNumber }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="needPerson" label="助力人数" align="center" >
                <template slot-scope="scope">
                  <span>{{ scope.row.needPerson || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="activityScore" label="所需积分" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.activityScore || '-' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
    </el-form>

  </div>
</template>

<script>

  export default {
    name:"activity",
    props: ["activityVo"],
    components:{
    },
    data() {
      return {
        zIndex: 3000,
        showSearch: true,
        // 预览图片
        carouselImgs: [],
        detailImgs: [],
        // 表单参数
        form: {
          activityInfoProVo:[],
        },
      };
    },
    created() {
      this.form = JSON.parse(JSON.stringify(this.activityVo));
      console.log(this.form)
    },
    methods: {

    }
  };
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }
</style>
